<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- 图片反扒 如果发现访问的来源页面不是同源 很多服务器选择拒绝访问 403错误 -->
    <!-- 反反扒策略 不记录页面的来源信息（不告诉浏览器是谁的在访问）  referrer 从哪个页面跳过来的  no-referrer 不记录来源页面 -->
    <meta name="referrer" content="no-referrer" />

    <title>你的堆糖</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul,
        li {
            list-style: none;
        }

        .box {
            width: 1200px;
            margin: 0 auto;
            /* display: flex; */
            font-size: 12px;
        }

        .box ul {
            width: 280px;
            background-color: honeydew;
            margin-right: 20px;
            display: flex;
            flex-direction: column;
            float: left;
        }

        ul li {
            width: 100%;
            padding: 2px;
            border: 1px solid rgb(187, 187, 187);
            background-color: rgb(250, 248, 227);
            margin-bottom: 10px;
        }

        li>a {
            width: 100%;
        }

        a img {
            width: 100%;
        }

        .albumname {
            font-size: 14px;
            padding: 5px 10px;
            display: flex;
            align-items: center;
            margin: 0px;
        }

        .imgAvatar {
            width: 45px;
            height: 45px;
            border-radius: 50%;
        }

        .senderBox {
            display: flex;
            padding: 5px 10px;
        }

        .senderBox div {
            display: flex;
            flex-direction: column;
            margin-left: 20px;
        }

        div.counts {
            padding-left: 10px;
        }

        div.counts>span:nth-child(3) {
            margin-left: 10px;
        }

        .senderinfo {
            display: flex;
            flex-direction: column;
        }

        .senderinfo span {
            flex-grow: 1;
            justify-content: center;
            align-items: center;
        }
    </style>
</head>

<body>
    <div class="box" id="box">
        <ul>
            <!-- <li>
                    <a href="javascript:;">
                        <img
                            src="https://c-ssl.duitang.com/uploads/blog/202105/18/20210518222432_bf243.thumb.1000_0.jpg"
                            alt=""
                        />
                    </a>
                    <div>
                        <p class="albumname">萌宠头像</p>
                        <div class="counts">
                            <span
                                class="glyphicon glyphicon-thumbs-up"
                                aria-hidden="true"
                            ></span>
                            <span>1</span>
                            <span
                                class="glyphicon glyphicon-star"
                                aria-hidden="true"
                            ></span>
                            <span>7</span>
                        </div>
                        <div class="senderBox">
                            <img
                                class="imgAvatar"
                                src="https://c-ssl.duitang.com/uploads/avatar/202012/20/20201220162448_36c1a.thumb.100_100_c.jpg"
                            />
                            <div class="senderinfo">
                                <span>人间仙子</span>
                                <span>发布到 默认专辑</span>
                            </div>
                        </div>
                    </div>
            </li> -->
        </ul>
        <ul></ul>
        <ul></ul>
        <ul></ul>
    </div>

    <script>
        function getData(start, callback) {
            const xhr = new XMLHttpRequest()
            xhr.open("GET", `/dt?include_fields=top_comments%2Cis_root%2Csource_link%2Citem%2Cbuyable%2Croot_id%2Cstatus%2Clike_count%2Csender%2Calbum%2Creply_count&filter_id=%E4%BA%BA%E7%89%A9%E6%98%8E%E6%98%9F&start=${start}&_=1646105918426`)
            xhr.onload = e => {
                // console.log(xhr.responseText);
                callback(JSON.parse(xhr.responseText))
            }
            xhr.onerror = err => console.log("err=", err)
            xhr.send(null)
        }

        const uls = document.querySelectorAll("ul")
        function getShortestUl() {
            let shortestUl = uls[0]
            let shortestHeight = shortestUl.clientHeight

            for (let i = 1; i < uls.length; i++) {
                if (uls[i].clientHeight < shortestHeight) {
                    shortestUl = uls[i]
                    shortestHeight = shortestUl.clientHeight
                }
            }

            return [shortestUl, shortestHeight]
        }

        let isLoading = false
        function loadPage(page) {
            console.log("loadPage",page);
            isLoading = true
            getData(24 * (page - 1), data => {
                const { data: { object_list: list } } = data
                list.map(
                    obj => `
                <li>
                    <a href="javascript:;">
                        <img
                            src="${obj.photo.path}"
                            alt=""
                        />
                    </a>
                    <div>
                        <p class="albumname">${obj.album.name}</p>
                        <div class="counts">
                            <span
                                class="glyphicon glyphicon-thumbs-up"
                                aria-hidden="true"
                            ></span>
                            <span>1</span>
                            <span
                                class="glyphicon glyphicon-star"
                                aria-hidden="true"
                            ></span>
                            <span>7</span>
                        </div>
                        <div class="senderBox">
                            <img
                                class="imgAvatar"
                                src="${obj.sender.avatar}"
                            />
                            <div class="senderinfo">
                                <span>${obj.sender.username}</span>
                                <span>发布到 ${obj.album.name}</span>
                            </div>
                        </div>
                    </div>
            </li>
                `
                ).forEach(
                    liHtml => {
                        getShortestUl()[0].innerHTML += liHtml
                    }
                )
                isLoading = false
            })
        }

        let currentPage = 1
        loadPage(currentPage)

        window.onscroll = e => {
            if (window.scrollY + window.innerHeight > getShortestUl()[1]) {
                console.log("滚动见底");
                !isLoading && loadPage(++currentPage)
            }
        }
    </script>

</body>

</html>